<template>
  <div>
    <atom-notice-bar :color="'#3366FF'" :background="'rgba(51,102,255,0.10)'" closeable
      >数据更新时间{{ updateDate }} 15:30，交易日15:30后刷新当日数据</atom-notice-bar
    >
    <HqList :footerOption="footerOption" :tableData="tableData" :columns="columns" @sortChange="sortChange"></HqList>
  </div>
</template>

<script>
import HqList from '@/components/Ztfp/HqList.vue';
import { reqOnceLimitupPool } from '@/apis/index';
import sortDataMixins from '@/mixins/sortDataMixins.js';
import { errorReport, getMarketInfoTable, formatDate } from '@/scripts/tools.js';
import { zbcColumn } from '@/scripts/tableColumn.js';

export default {
  name: 'Dtc',
  mixins: [sortDataMixins],
  components: {
    HqList,
  },
  data() {
    return {
      footerOption: {
        type: 'loading',
      },
      updateDate: '',
      tableData: [],
      columns: JSON.parse(JSON.stringify(zbcColumn)),
    };
  },
  methods: {
    sortChange(params) {
      this.sortData(this.columns, 'tableData', params);
    },
    getOnceLimitupPool() {
      reqOnceLimitupPool()
        .then(res => {
          const tableData = [];
          const stockcodes = [];
          const marketids = [];
          res.result.forEach(item => {
            const { stockname, stockcode, marketcode, hsl, scztsj, jye, jyl, ltz, zsz } = item;
            stockcodes.push(stockcode);
            marketids.push(marketcode);
            tableData.push({
              stockName: stockname,
              stockCode: stockcode,
              marketCode: marketcode,
              hsl: Number(hsl),
              scztsj,
              jye: Number(jye),
              jyl: Number(jyl),
              ltz: Number(ltz),
              zsz: Number(zsz),
            });
          });
          const date = res.result?.[0]?.date;
          this.updateDate = formatDate(date + '', '-');
          getMarketInfoTable({ stockcodes, marketids, tableData }).then(resTable => {
            this.tableData = resTable;
            this.sortData(this.columns, 'tableData');
          });
        })
        .catch(err => {
          errorReport({
            name: `炸板池接口报错，${err.name}`,
            message: err.message,
            stack: err.stack,
          });
        })
        .finally(() => {
          this.footerOption.type = '';
        });
    },
  },
  activated() {
    this.getOnceLimitupPool();
  },
};
</script>
